<template>
	<div class="login">
		<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
			<h3 class="title">用户登录</h3>
			<el-form-item prop="nickName">
				<el-input v-model="loginForm.nickName" type="text" auto-complete="off" placeholder="账号">
				</el-input>
			</el-form-item>
			<el-form-item prop="password">
				<el-input
					v-model="loginForm.password"
					:type="flag ? 'text' : 'password'"
					auto-complete="off"
					placeholder="密码"
				>
					<i
						slot="suffix"
						:class="[flag ? 'el-icon-minus' : 'el-icon-view']"
						style="margin-top: 16px; font-size: 18px"
						autocomplete="auto"
						@click="flag = !flag"
					/>
				</el-input>
			</el-form-item>
			<el-form-item style="width: 100%">
				<el-button
					size="medium"
					type="primary"
					style="width: 100%; height: 50px"
					@click.native.prevent="handleLogin"
				>
					<span>登 录</span>
				</el-button>
			</el-form-item>
			<el-form-item style="width: 100%">
				<el-button
					size="medium"
					type="primary"
					style="width: 100%; height: 50px"
					@click.native.prevent="$router.push('/register')"
				>
					<span>注 册</span>
				</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	import { login, getUserInfo } from '@/api/login';
	import { setToken } from '@/utils/token';
	export default {
		name: 'Login',
		data() {
			return {
				loginForm: {
					nickName: '',
					password: '',
				},
				loginRules: {
					nickName: [{ required: true, trigger: 'blur', message: '请输入您的账号' }],
					password: [{ required: true, trigger: 'blur', message: '请输入您的密码' }],
				},

				flag: false,
			};
		},

		methods: {
			async handleLogin() {
				let valid = false;
				this.$refs.loginForm.validate((v) => (valid = v));
				if (!valid) return;
				let {
					data: { msg, data: loginInfo },
				} = await login(this.loginForm);
				setToken(loginInfo.token);
				this.$modal.msgSuccess(msg);
				this.$store.dispatch('GetUserInfo').then((res) => {
					this.$router.push(res.InExamId && res.power != 2 ? `/exam?id=${res.InExamId}` : '/');
				});
			},
		},
	};
</script>

<style rel="stylesheet/scss" lang="scss">
	.login {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		background-image: url('../assets/images/login-background.jpg');
		background-size: cover;
	}
	.title {
		font-size: 24px;
		margin: 0px auto 30px auto;
		text-align: center;
		color: #fff;
	}

	.login-form {
		border-radius: 6px;
		background: transparent;
		width: 550px;
		padding: 25px;
		.el-input {
			height: 50px;
			input {
				height: 50px;
			}
		}
		.el-input__inner {
			color: #fff;
			background: rgba(255, 255, 255, 0.3);
			border: none;
		}
		.input-icon {
			height: 39px;
			width: 14px;
			margin-left: 2px;
		}
	}
	.login-tip {
		font-size: 13px;
		text-align: center;
		color: #bfbfbf;
	}
	.login-code {
		width: 33%;
		height: 38px;
		float: right;
		img {
			cursor: pointer;
			vertical-align: middle;
		}
	}
	.el-login-footer {
		height: 40px;
		line-height: 40px;
		position: fixed;
		bottom: 0;
		width: 100%;
		text-align: center;
		color: #fff;
		font-family: Arial;
		font-size: 12px;
		letter-spacing: 1px;
	}
	.login-code-img {
		height: 38px;
	}
</style>
